<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js小组实验作业</title>
    <!--css-->
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/animation.css">
</head>
<body>
    <!--html-->
    <div class="all-container" >
        <!--项目介绍-->
        <div class="project-container">
            <!--标题-->
            <div>
                <h1>康威生命游戏</h1>
                <h2>Conway's Game of Life</h2>
            </div>
            <!--项目介绍-->
            <div>
                <!--课程背景-->
                <div>
                    <h3>项目背景</h3>
                    <ul>
                        <li>课程：武汉大学Web设计与社交平台开发2024</li>
                        <li>教师：韩波 教授</li>
                        <li>时间：2024/03/14 - 2024/04/07</li>
                    </ul>
                </div>
                <!--小组成员-->
                <div>
                    <h3>小组成员</h3>
                    <ul>
                        <li>林昂骏 2021302111490</li>
                        <li>时啟轩 2021302111167</li>
                    </ul>
                </div>
                <!--项目地址-->
                <div>
                    <h3>项目地址</h3>
                    <a href="https://gitee.com/ajgamma/game-of-life-js.git">https://gitee.com/ajgamma/game-of-life-js.git</a>
                </div>
            </div>
            <div style="flex: 1"></div>
            <!--开始游戏-->
            <button id="game-btn">开始游戏</button>
        </div>
        <!--康威生命游戏介绍-->
        <div class="intro-container">
            <div>
                <h3>游戏背景</h3>
                <p>康威生命游戏，又称为“生命游戏”，是由数学家约翰·霍顿·康威在1970年发明的一种零玩家游戏。它是一个经典的细胞自动机，通过简单的规则模拟细胞的生命周期。在这个游戏中，每个细胞的生死变化仅由其周围的邻居细胞状态决定，展现了复杂系统中出人意料的行为。</p>
            </div>
            <div>
                <h3>游戏规则</h3>
                <ul>
                    <li>生存：如果一个活细胞周围有2或3个活邻居，该细胞在下一代继续存活。</li>
                    <li>死亡：如果一个活细胞周围活邻居少于2个（孤立）或多于3个（过度拥挤），该细胞在下一代死亡。</li>
                    <li>繁殖：如果一个死细胞周围恰好有3个活邻居，该细胞在下一代变为活细胞（诞生）。</li>
                </ul>
            </div>
            <div>
                <h3>玩法介绍</h3>
                <ul>
                    <li>在游戏开始时，玩家可以在网格中放置活细胞或预设细胞团。</li>
                    <li>一旦放置完成，游戏将根据上述规则自动演进。</li>
                    <li>玩家可以观察细胞群落如何随时间发展，形成各种模式。</li>
                    <li>游戏没有获胜条件，它是一个探索和发现的过程，玩家可以尝试不同的初始配置，看看它们如何演变。</li>
                </ul>
            </div>
            <div>
                <h3>游戏按键</h3>
                <ul>
                    <li>空格键：暂停/继续</li>
                    <li>滚轮：调整演化速度</li>
                    <li>鼠标左键（可拖动）：放置细胞/细胞团</li>
                    <li>鼠标右键：旋转细胞团</li>
                </ul>
            </div>
            <div style="flex: 1"></div>
            <div style="align-self: end">
                <a href="https://github.com/martinstannard/particle_life.git">本页背景参考github开源项目，点击跳转查看</a>
            </div>
        </div>
    </div>

    <!--js-->
    <!--按钮跳转-->
    <script src="./js/index.js"></script>
    <!--背景-->
    <script src="./other/pixi/pixi.min.js"></script>
    <script src="./other/rules.js"></script>
    <script src="./other/blob.js"></script>
    <script type="text/javascript">

        var params = {
            population: 240,
            species: 5,
            decay: 0.9,
            radius: 100,
            boundary: 30,
            restart: function() {
                console.log(params)
                init()
            }
        }

        let gui = null

        window.onload = function() {
            gui = new dat.GUI();
            gui.add(params, 'population', 50, 1000).step(10)
            gui.add(params, 'species', 2, 10).step(1)
            gui.add(params, 'decay', 0.0, 1.0)
            gui.add(params, 'radius', 20, 200).step(1)
            gui.add(params, 'boundary', 5, 100).step(1)
            gui.add(params, 'restart')
        };

        let type = "WebGL"
        if (!PIXI.utils.isWebGLSupported()) {
            type = "canvas"
        }

        let cx = window.innerWidth
        let cy = window.innerHeight
        //Create a Pixi Application
        let app = new PIXI.Application({ width: cx, height: cy, antialias: true });
        var renderer = app.renderer;

        renderer.view.style.position = 'absolute';
        renderer.view.style.left = '50%';
        renderer.view.style.top = '50%';
        renderer.view.style.transform = 'translate3d( -50%, -50%, 0 )';
        document.body.appendChild(app.view);

        init()

        // main loop
        app.ticker.add(function(delta) {
            for (var i = 0; i < blobs.length; i++) {
                blobs[i].update(blobs)
            }
        });

        function init() {
            app.stage.removeChildren()
            blobs = new Array()
            rules = new Rules(params.species, params.boundary, params.radius)
            addBlobs(params, app, rules)
        }

    </script>


</body>
</html>